<template>
  <div class="common-warp wh100 warp-bg rule-warp">
    <div class="noo">
      <a-card title="基本信息">
        <a-form ref="formRef" :model="state.forma" :rules=rules>
          <a-form-item label="计划名称" name="name">
            <a-input v-model:value="state.forma.name" />
          </a-form-item>
        </a-form>
      </a-card>

      <a-card title="关联配置" style="margin-top: 12px;">
        <a-form ref="formRef" :model="state.formb" :rules=rules>
          <a-form-item label="考勤组" name="teamCode">
            <a-select v-model:value="state.formb.teamCode" style="width:  100%">
              <a-select-option v-for="item in state.teamList" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="考勤规则" name="ruleCode">
            <a-select v-model:value="state.formb.ruleCode" style="width:  100%">
              <a-select-option v-for="item in state.ruleList" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-card>

      <a-card title="时间配置" style="margin-top: 12px;margin-bottom: 12px;">
        <a-form ref="formRef" :model="state.formc" :rules=rules>
          <a-form-item label="开始时间" name="inStart">
            <a-date-picker v-model:value="state.formc.startOn" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD"
              style="width: 100%;" />
          </a-form-item>
          <a-form-item label="结束时间" name="inTime">
            <a-date-picker v-model:value="state.formc.endOn" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD"
              style="width: 100%;" />
          </a-form-item>
        </a-form>
      </a-card>
    </div>
    <a-button type="primary" block @click="confirm(formRef)">提交</a-button>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted, } from 'vue';
import { useAccessTimezoneListApi, useAttendPlanCreateApi, useAttendPlanQueryApi, useAttendPlanUpdateApi, useAttendRuleListApi, useAttendTeamListApi } from '@/api/index'
import { message } from 'ant-design-vue';
import { useRoute, useRouter } from 'vue-router'
import type { AttendPlanItem } from '@/types/attend/plan';
import type { CodeName } from '@/types/common';
import moment from 'moment';
const router = useRouter()
const route = useRoute()

const formRef = ref();

const rules = {
  name: [{ required: true, message: '请输入分组名称', trigger: 'change' }],
};

const useContenta = () => {
  return {
    code: "",
    name: "",
  }
}
const useContentb = () => {
  return {
    teamCode: "",
    ruleCode: "",
  }
}

const useContentc = () => {
  return {
    endOn: "",
    startOn: "",
  }
}

const state = reactive({
  forma: useContenta(),
  formb: useContentb(),
  formc: useContentc(),
  teamList: [] as CodeName[],
  ruleList: [] as CodeName[],
})

//根据路由参数搜索
const queryData = async (casbinCode: string) => {
  let { data: { code,
    name,
    endOn,
    startOn,
    ruleCode,
    teamCode,
  } } = await useAttendPlanQueryApi({ code: casbinCode })
  state.forma = {
    code,
    name,
  }
  state.formb = {
    ruleCode,
    teamCode,
  }
  state.formc = {
    endOn:moment(endOn).format('YYYY-MM-DD'),
    startOn:moment(startOn).format('YYYY-MM-DD'),
  }
}

//提交
const confirm = (formRef: any) => {
  if (!formRef) return;
  formRef.validate().then(async () => {
    await useAttendPlanUpdateApi({ ...state.forma, ...state.formb,...state.formc })
    message.success("操作成功", 2);
    setTimeout(() => {
      router.push({ name: 'AttentPlan' })
    }, 2300)
  })
};

const getTeamList = async () => {
  let { data } = await useAttendTeamListApi()
  state.teamList = data
}
const getRuleList = async () => {
  let { data } = await useAttendRuleListApi()
  state.ruleList = data
}

onMounted(() => {
  document.title = '编辑'
  let { name, code }: any = route.query
  state.forma.name = name
  state.forma.code = code
  getTeamList()
  getRuleList()
  queryData(code)
})

</script>
<style scoped lang='less'>
.noo {
  height: calc(100vh - 56px);
  overflow-y: scroll;

  :deep(.ant-form-item-label) {
    padding: 0 !important;
  }

  :deep(.ant-card-body) {
    padding: 12px !important;
  }

  :deep(.ant-card-head) {
    padding: 12px !important;
  }

  :deep(.ant-form-item) {
    margin-bottom: 12px !important;
  }

}
</style>